<template>
  <view class="repair-container">
    <!-- 顶部导航栏 -->
	<view class="navbar">
	  <view class="navbar-left" @click="navigateBack">
	    <text class="icon-arrow-left">←</text>
	  </view>
	  <view class="navbar-title">机器维修</view>
	  <view class="navbar-right">
	  </view>
	</view>
    <!-- 维修申请入口卡片 -->
    <view class="apply-section">
      <view 
        class="apply-card"
        :custom-style="applyCardStyle"
        @click="handleApplyCardClick"
      >
        <view class="apply-card-inner">
          <view class="apply-icon-wrapper">
            <u-icon 
              name="info-circle" 
              color="#367AF6" 
              size="80rpx" 
              class="apply-icon"
            ></u-icon>
          </view>
          
          <view class="apply-info">
            <text class="apply-title">申请设备维修</text>
            <text class="apply-subtitle">专业技师 · 原厂配件 · 质保服务</text>
            <u-button 
              class="apply-btn"
              type="primary"
              size="medium"
              @click="navigateToApply"
            >
              立即申请
              <u-icon name="arrow-right" size="24rpx" color="#fff" class="btn-icon"></u-icon>
            </u-button>
          </view>
          
          <view class="apply-stats">
            <view class="stat-item">
              <text class="stat-value">30+</text>
              <text class="stat-label">专业技师</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">24h</text>
              <text class="stat-label">快速响应</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">98%</text>
              <text class="stat-label">修复率</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-section">
      <u-tabs 
        :list="filterTabs" 
        v-model="activeTab" 
        :is-scroll="false"
        active-color="#367AF6"
        inactive-color="#606266"
        @change="handleTabChange"
        class="filter-tabs"
      ></u-tabs>
      

    </view>

    <!-- 维修列表 -->
    <view class="repair-list">
      <!-- 加载状态 -->
      <u-skeleton 
        v-if="loading" 
        :rows="5" 
        :loading="loading"
        class="skeleton-loading"
      ></u-skeleton>
      
      <!-- 空状态 -->
      <u-empty 
        v-if="!loading && filteredRepairs.length === 0"
        text="暂无维修记录"
        mode="list"
        @click="navigateToApply"
        class="empty-state"
      ></u-empty>
      
      <!-- 列表内容 -->
      <view 
        v-for="(item, index) in filteredRepairs" 
        :key="item.id"
        class="repair-item apply-card"
        :style="{
          opacity: item.opacity,
          transform: `translateY(${item.translateY}rpx)`,
          transition: `all ${0.3 + index * 0.1}s cubic-bezier(0.4, 0, 0.2, 1)`
        }"
        @click="navigateToDetail(item.id)"
      >
        <view 
          :custom-style="itemCardStyle"
        >
          <view class="repair-header">
            <view class="drone-model">
              <text class="model-text">{{ item.droneModel }}</text>
              <u-tag 
                :text="item.status" 
                :type="getStatusType(item.status)"
                class="status-tag"
              ></u-tag>
            </view>
            <text class="order-number">订单号: {{ item.orderNo }}</text>
          </view>
          
          <view class="repair-body">
            <view class="repair-info">
              <view class="info-row">
                <u-icon name="text" size="26rpx" color="#909399" class="info-icon"></u-icon>
                <text class="info-label">故障描述:</text>
                <text class="info-value">{{ item.faultDescription }}</text>
              </view>
              <view class="info-row">
                <u-icon name="clock" size="26rpx" color="#909399" class="info-icon"></u-icon>
                <text class="info-label">提交时间:</text>
                <text class="info-value">{{ item.submitTime }}</text>
              </view>
              <view class="info-row" v-if="item.estimatedCompletion">
                <u-icon name="calendar" size="26rpx" color="#909399" class="info-icon"></u-icon>
                <text class="info-label">预计完成:</text>
                <text class="info-value">{{ item.estimatedCompletion }}</text>
              </view>
              <view class="info-row" v-if="item.totalAmount">
                <u-icon name="money" size="26rpx" color="#909399" class="info-icon"></u-icon>
                <text class="info-label">维修费用:</text>
                <text class="info-value fee">{{ item.totalAmount > 0 ? '¥' + item.totalAmount.toFixed(2) : '待评估' }}</text>
              </view>
            </view>
          </view>
          
          <view class="repair-footer">
            
            
            <view class="action-buttons">
              <u-button 
                v-if="['待支付', '待确认'].includes(item.status)"
                type="primary"
                @click.stop="handlePrimaryAction(item.id)"
              >
                {{ item.status === '待支付' ? '立即支付' : '确认收货' }}
              </u-button>
              <u-button 
                v-if="item.status === '维修中'"
                type="info"
                @click.stop="handleTrackProgress(item.id)"
              >
                跟踪进度
              </u-button>
              <u-button 
                v-if="['待审核', '待支付'].includes(item.status)"
                plain
                @click.stop="handleCancelOrder(item.id)"
              >
                取消
              </u-button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <u-popup 
      v-model="showFilter" 
      mode="bottom" 
      :height="400"
      closeable
      @close="showFilter = false"
    >
      <view class="popup-content">
        <text class="popup-title">筛选条件</text>
        <view class="filter-options">
          <text class="option-title">设备型号</text>
          <u-checkbox-group v-model="selectedModels">
            <u-checkbox 
              v-for="model in droneModels" 
              :key="model.value"
              :label="model.label"
              :name="model.value"
              shape="circle"
              class="model-checkbox"
            ></u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="popup-actions">
          <u-button 
            type="text" 
            text="重置" 
            @click="resetFilters"
            class="popup-btn"
          ></u-button>
          <u-button 
            type="primary" 
            text="确认" 
            @click="confirmFilters"
            class="popup-btn"
          ></u-button>
        </view>
      </view>
    </u-popup>

    <!-- 排序弹窗 -->
    <u-popup 
      v-model="showSort" 
      mode="bottom" 
      :height="300"
      closeable
      @close="showSort = false"
    >
      <view class="popup-content">
        <text class="popup-title">排序方式</text>
        <view class="sort-options">
          <u-radio-group v-model="sortType">
            <u-radio 
              name="latest"
              label="最新提交"
              shape="circle"
              class="sort-radio"
            ></u-radio>
            <u-radio 
              name="progress"
              label="按进度排序"
              shape="circle"
              class="sort-radio"
            ></u-radio>
            <u-radio 
              name="amount"
              label="费用从低到高"
              shape="circle"
              class="sort-radio"
            ></u-radio>
          </u-radio-group>
        </view>
        <view class="popup-actions">
          <u-button 
            type="text" 
            text="取消" 
            @click="showSort = false"
            class="popup-btn"
          ></u-button>
          <u-button 
            type="primary" 
            text="确认" 
            @click="confirmSort"
            class="popup-btn"
          ></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 导航栏样式
      navbarBg: {
        background: 'linear-gradient(135deg, #1E40AF, #3B82F6)'
      },
      
      // 申请卡片动画样式
      applyCardStyle: {
        transform: 'scale(1)',
        transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        boxShadow: '0 10rpx 30rpx rgba(54, 122, 246, 0.15)'
      },
      
      // 列表项卡片样式
      itemCardStyle: {
        borderRadius: '16rpx',
        boxShadow: '0 4rpx 16rpx rgba(0, 0, 0, 0.05)',
        border: 'none'
      },
      
      // 筛选标签
      filterTabs: [
        { name: '全部' },
        { name: '待审核' },
        { name: '待支付' },
        { name: '维修中' },
        { name: '待确认' },
        { name: '已完成' }
      ],
      activeTab: 0,
      
      // 筛选弹窗状态
      showFilter: false,
      showSort: false,
      
      // 筛选选项
      droneModels: [
        { label: 'DJI Mini 3 Pro', value: 'mini3' },
        { label: 'DJI Air 3', value: 'air3' },
        { label: 'DJI Mavic 3', value: 'mavic3' },
        { label: 'DJI Mini 4 Pro', value: 'mini4' },
        { label: 'DJI Air 2S', value: 'air2s' }
      ],
      selectedModels: [],
      sortType: 'latest',
      
      // 加载状态
      loading: true,
      
      // 维修列表数据
      repairList: []
    };
  },
  
  computed: {
    // 根据筛选条件过滤维修记录
    filteredRepairs() {
      let result = [...this.repairList];
      
      // 状态筛选
      if (this.activeTab !== 0) {
        const status = this.filterTabs[this.activeTab].name;
        result = result.filter(item => item.status === status);
      }
      
      // 设备型号筛选
      if (this.selectedModels.length > 0) {
        result = result.filter(item => {
          const modelCode = item.droneModel.toLowerCase().replace(/\s+/g, '').replace('dji', '').replace('pro', '');
          return this.selectedModels.some(m => modelCode.includes(m));
        });
      }
      
      // 排序
      switch (this.sortType) {
        case 'latest':
          return result.sort((a, b) => new Date(b.submitTime) - new Date(a.submitTime));
        case 'progress':
          return result.sort((a, b) => b.progress - a.progress);
        case 'amount':
          return result.sort((a, b) => a.totalAmount - b.totalAmount);
        default:
          return result;
      }
    }
  },
  
  onLoad() {
    // 加载维修数据
    this.loadRepairData();
  },
  
  methods: {
    // 加载维修数据
    loadRepairData() {
      // 模拟网络请求延迟
      setTimeout(() => {
        // 假数据 - 维修记录
        this.repairList = [
          {
            id: 1,
            orderNo: 'DR20240615001',
            droneModel: 'DJI Mini 3 Pro',
            status: '待审核',
            faultDescription: '云台抖动，拍摄画面不稳定，电池续航明显下降',
            submitTime: '2024-06-15 09:35',
            estimatedCompletion: null,
            totalAmount: 0,
            progress: 0,
            opacity: 0,
            translateY: 80
          },
          {
            id: 2,
            orderNo: 'DR20240612015',
            droneModel: 'DJI Air 3',
            status: '待支付',
            faultDescription: '右侧电机异响，起飞时明显倾斜，无法正常悬停',
            submitTime: '2024-06-12 14:22',
            estimatedCompletion: '2024-06-20',
            totalAmount: 580.00,
            progress: 20,
            opacity: 0,
            translateY: 80
          },
          {
            id: 3,
            orderNo: 'DR20240610007',
            droneModel: 'DJI Mavic 3',
            status: '维修中',
            faultDescription: '镜头进灰，GPS信号弱，遥控器连接频繁断开',
            submitTime: '2024-06-10 16:47',
            estimatedCompletion: '2024-06-18',
            totalAmount: 950.00,
            progress: 65,
            opacity: 0,
            translateY: 80
          },
          {
            id: 4,
            orderNo: 'DR20240605023',
            droneModel: 'DJI Mini 4 Pro',
            status: '待确认',
            faultDescription: '电池鼓包，充电异常，无法充满电',
            submitTime: '2024-06-05 10:15',
            estimatedCompletion: '2024-06-15',
            totalAmount: 320.00,
            progress: 100,
            opacity: 0,
            translateY: 80
          },
          {
            id: 5,
            orderNo: 'DR20240601011',
            droneModel: 'DJI Air 2S',
            status: '已完成',
            faultDescription: '机身轻微划痕，传感器校准异常，飞行姿态不稳定',
            submitTime: '2024-06-01 11:30',
            estimatedCompletion: '2024-06-08',
            totalAmount: 450.00,
            progress: 100,
            opacity: 0,
            translateY: 80
          }
        ];
        
        this.loading = false;
        // 触发列表动画
        this.triggerListAnimation();
      }, 1500);
    },
    
    // 触发列表项动画
    triggerListAnimation() {
      this.repairList.forEach((item, index) => {
        setTimeout(() => {
          item.opacity = 1;
          item.translateY = 0;
        }, 100 * index);
      });
    },
    
    // 根据状态获取标签类型
    getStatusType(status) {
      const typeMap = {
        '待审核': 'warning',
        '待支付': 'primary',
        '维修中': 'info',
        '待确认': 'success',
        '已完成': 'success'
      };
      return typeMap[status] || 'default';
    },
    
    // 申请卡片点击动画
    handleApplyCardClick() {
      this.applyCardStyle.transform = 'scale(0.98)';
      this.applyCardStyle.boxShadow = '0 8rpx 24rpx rgba(54, 122, 246, 0.2)';
      setTimeout(() => {
        this.applyCardStyle.transform = 'scale(1)';
        this.applyCardStyle.boxShadow = '0 10rpx 30rpx rgba(54, 122, 246, 0.15)';
      }, 200);
    },
    
    // 导航到申请页面
    navigateToApply() {
		console.log('dasdasdas',8888)
      uni.navigateTo({
        url: "/pages/repair/apply"
      });
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    
    // 显示帮助信息
    showHelp() {
      uni.showModal({
        title: '维修服务帮助',
        content: '如有疑问，请联系客服热线：400-888-8888',
        showCancel: false
      });
    },
    
    // 处理标签切换
    handleTabChange(index) {
      this.activeTab = index;
      // 重置并重新触发动画
      this.repairList.forEach(item => {
        item.opacity = 0;
        item.translateY = 80;
      });
      this.triggerListAnimation();
    },
    
    // 显示筛选弹窗
    showFilterPopup() {
      this.showFilter = true;
    },
    
    // 显示排序弹窗
    showSortPopup() {
      this.showSort = true;
    },
    
    // 重置筛选条件
    resetFilters() {
      this.selectedModels = [];
    },
    
    // 确认筛选条件
    confirmFilters() {
      this.showFilter = false;
      // 触发列表动画
      this.triggerListAnimation();
    },
    
    // 确认排序方式
    confirmSort() {
      this.showSort = false;
      // 触发列表动画
      this.triggerListAnimation();
    },
    
    // 导航到详情页
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/repair/detail?id=${id}`
      });
    },
    
    // 处理主要操作（支付/确认收货）
    handlePrimaryAction(id) {
      const item = this.repairList.find(item => item.id === id);
      if (item.status === '待支付') {
        // 模拟支付操作
        uni.showModal({
          title: '确认支付',
          content: `您将支付维修费用 ¥${item.totalAmount.toFixed(2)}`,
          success: (res) => {
            if (res.confirm) {
              item.status = '维修中';
              item.progress = 30;
              uni.showToast({
                title: '支付成功',
                icon: 'success'
              });
            }
          }
        });
      } else if (item.status === '待确认') {
        // 确认收货操作
        uni.showModal({
          title: '确认收货',
          content: '请确认您已收到维修好的设备',
          success: (res) => {
            if (res.confirm) {
              item.status = '已完成';
              uni.showToast({
                title: '确认成功',
                icon: 'success'
              });
            }
          }
        });
      }
    },
    
    // 跟踪维修进度
    handleTrackProgress(id) {
      uni.navigateTo({
        url: `/pages/repair/track?id=${id}`
      });
    },
    
    // 取消订单
    handleCancelOrder(id) {
      uni.showModal({
        title: '取消订单',
        content: '确定要取消此维修订单吗？',
        success: (res) => {
          if (res.confirm) {
            const index = this.repairList.findIndex(item => item.id === id);
            if (index !== -1) {
              this.repairList.splice(index, 1);
              uni.showToast({
                title: '订单已取消',
                icon: 'none'
              });
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.repair-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 30rpx;
}

/* 申请卡片样式 */
.apply-section {
  padding: 24rpx;
}

.apply-card {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 2rpx 3rpx 3rpx 2rpx #e6e6e6;
}

.apply-card-inner {
  display: flex;
  align-items: center;
  padding: 30rpx 24rpx;
}

.apply-icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #ECF2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 28rpx;
  flex-shrink: 0;
}

.apply-info {
  flex: 1;
  margin-right: 20rpx;
}

.apply-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1D2129;
  display: block;
  margin-bottom: 8rpx;
}

.apply-subtitle {
  font-size: 26rpx;
  color: #86909C;
  display: block;
  margin-bottom: 20rpx;
}

.apply-btn {
  border-radius: 30rpx;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
}

.btn-icon {
  margin-left: 8rpx;
}

.apply-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10rpx;
}

.stat-value {
  font-size: 30rpx;
  font-weight: bold;
  color: #367AF6;
}

.stat-label {
  font-size: 22rpx;
  color: #86909C;
}

/* 筛选区域样式 */
.filter-section {
  background-color: #fff;
  padding: 0 24rpx;
  border-top: 1px solid #F2F3F5;
  border-bottom: 1px solid #F2F3F5;
}

.filter-tabs {
  background-color: transparent;
  height: 88rpx;
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  padding: 10rpx 0;
}

.filter-btn {
  color: #606266;
  font-size: 26rpx;
  padding: 0 15rpx;
  height: 50rpx;
  line-height: 50rpx;
}

.filter-icon {
  margin-right: 5rpx;
}

/* 维修列表样式 */
.repair-list {
  padding: 24rpx;
}

.repair-item {
  margin-bottom: 28rpx;
}

.repair-header {
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.drone-model {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  justify-content: space-between;
}

.model-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
}

.status-tag {
  margin-left: 16rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding: 0 15rpx;
  font-size: 24rpx;
}

.order-number {
  font-size: 24rpx;
  color: #86909C;
}

.repair-body {
  margin-bottom: 20rpx;
}

.repair-info {
  border-left: 4rpx solid #E5E6EB;
  padding-left: 20rpx;
}

.info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.info-icon {
  margin-top: 4rpx;
  margin-right: 12rpx;
}

.info-label {
  font-size: 26rpx;
  color: #86909C;
  width: 140rpx;
}

.info-value {
  font-size: 26rpx;
  color: #1D2129;
  flex: 1;
  word-break: break-all;
}

.fee {
  color: #F53F3F;
  font-weight: 500;
}

.repair-footer {
  border-top: 1px solid #F2F3F5;
  padding-top: 20rpx;
}

.progress-container {
  margin-bottom: 16rpx;
}

.progress-text {
  font-size: 24rpx;
  color: #86909C;
  display: block;
  margin-top: 8rpx;
  text-align: right;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12rpx;
}

/* 骨架屏和空状态 */
.skeleton-loading {
  margin-bottom: 28rpx;
}

.empty-state {
  margin-top: 100rpx;
}

/* 弹窗样式 */
.popup-content {
  padding: 30rpx;
}

.popup-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #1D2129;
  display: block;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #F2F3F5;
}

.option-title {
  font-size: 28rpx;
  color: #1D2129;
  display: block;
  margin-bottom: 20rpx;
}

.model-checkbox {
  margin-right: 24rpx;
  margin-bottom: 20rpx;
}

.sort-radio {
  display: block;
  margin-bottom: 24rpx;
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15rpx;
  margin-top: 40rpx;
}

.popup-btn {
  width: 160rpx;
}
</style>
